<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>商机名称</p>
            <p>{{ initData.projectName }}</p>
          </el-col>
          <el-col :span="8">
            <p>所属公司</p>
            <p>{{ getCompanyId(initData.companyId) }}</p>
          </el-col>
          <el-col :span="8">
            <p>商机类别</p>
            <p>{{ getProjectType(initData.projectType) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button v-if="accreditChildren.editorBusiness" type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="商机详情" name="first">
          <div class="infoBox">
            <el-col :span="12">商机名称：{{ initData.projectName }}</el-col>
            <el-col :span="12">所属公司：{{ getCompanyId(initData.companyId) }}</el-col>
            <el-col :span="12">商机类别：{{ getProjectType(initData.projectType) }}</el-col>
            <el-col :span="12">成立时间：{{ initData.foundTime }}</el-col>
            <el-col :span="12">品牌源地：{{ initData.birthplace }}</el-col>
            <el-col :span="12">加盟区域：{{ initData.franchiseArea }}</el-col>
            <el-col :span="12">经营品种：{{ initData.category }}</el-col>
            <el-col :span="12">适合人群：{{ initData.suitCrowd }}</el-col>
            <el-col :span="12">最小投资金额：{{ initData.investmentMin ?`${initData.investmentMin}万元`:'' }}</el-col>
            <el-col :span="12">最大投资金额：{{ initData.investmentMax ?`${initData.investmentMax}万元`:'' }}</el-col>
            <el-col :span="12">门店数：{{ initData.storeNumber ?`${initData.storeNumber}家`:'' }}</el-col>
            <el-col
              :span="12"
            >加盟店：{{ initData.franchisedStoreNumber ?`${initData.franchisedStoreNumber}家`:'' }}</el-col>
            <el-col
              :span="12"
            >直营店：{{ initData.directShopNumber ?`${initData.directShopNumber}家`:'' }}</el-col>
            <el-col :span="12">是否精选：{{ initData.isSelected===true ? '已加入精选':'暂未加入精选' }}</el-col>
            <el-col
              :span="12"
            >推荐指数：{{ initData.recommendNumber ? `${initData.recommendNumber}颗星`:'' }}</el-col>
            <el-col :span="12">是否平台担保：{{ initData.warrant ===true ? '已加入平台担保':'暂未加入平台担保' }}</el-col>
            <el-col :span="12">排序：{{ initData.sort }}</el-col>
            <el-col :span="24">
              标签：
              <el-tag
                v-for="tag in initData.label ? JSON.parse(initData.label) :[]"
                :key="tag.id"
                :style="{color:'#'+tag.color}"
                :disable-transitions="false"
                @click="pushArr(tag)"
              >{{ tag.label }}</el-tag>
            </el-col>
            <el-col :span="24">360全景地址：{{ initData.panoramic  }}</el-col>
            <el-col :span="24">摘要：{{ initData.remark ?initData.remark:'暂未设置摘要' }}</el-col>
            <el-col :span="24">描述：{{ initData.description ?initData.description:'暂未设置描述' }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="PROJECT_FILE.children.length" label="商机图片" name="second">
          <photoList :type-arr="PROJECT_FILE.children" :data-id="$props.id" _type="商机详情" />
        </el-tab-pane>
        <el-tab-pane label="商机视频" name="third">
          <div v-if="videoUpload.children.length">
            <div v-for="(v,index) in videoUpload.children" :key="index" @click="message1(v)">
                <span>{{ v.dicName }}</span>
                <span v-if="index === 0" style="marginLeft:240px">视频封面</span>
              <div style="marginLeft:100px;marginTop:20px;" class="clearfix">
                <div class="left">
                  <uploadVideo
                  _type="1"
                  :data-id="$props.id"
                  :obj="getImgSrc(v.dicCode)"
                  :type-code="v.dicCode"
                  @changeSubmitVideo="changeSubmitVideo"
                  @changeadvert="changeadvert"
                />
                </div>
                <div class="left" style="margin-left:100px;border:1px dashed rgb(217, 217, 217)">
                  <onlyCcover
                  :imageUrlCover="getImgSrc1(v.dicCode)"
                  :ImageType='v.dicCode'
                  @changeadvertCoverImage='changeadvertCoverImage'/>
                </div>
              </div>
            </div>
            <div class="right">
              <el-button type="primary" :disabled="canSubmitVideo" @click="subMitPhotoList">保 存</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目详情" name="four">
          <Editor
            :content="ProDetailContent"
            :category1="ProjectDetailStr"
            @submitText="submitProDetailCon"
          />
        </el-tab-pane>
        <el-tab-pane label="资质介绍" name="five">
          <Editor
            :content="aptitudeContent"
            :category1="aptitudeContentStr"
            @submitText="submitProDetailCon"
          />
        </el-tab-pane>
        <el-tab-pane label="政策帮扶" name="six">
          <Editor :content="Policy" :category1="Policy" @submitText="submitProDetailCon" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <el-row v-loading="loading" class="padding20"></el-row> -->
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics, getDicCode } from '~/utils/util';
import Editor from '~/components/commom/Editor';
import photoList from '~/components/commom/photoList';
import uploadVideo from '~/components/commom/uploadVideo';
import onlyCcover from '~/components/commom/onlyCcover';
export default {
  components: {
    Editor,
    photoList,
    uploadVideo,
    onlyCcover
  },
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      showInfo: false,
      loading: true,
      companies: [],
      areas: [],
      PROJECT_FILE: {
        children: []
      },
      videoUpload: {
        children: []
      },
      activeName: 'first',
      canSubmitVideo: true,
      ProDetailContent: '',
      ProjectDetailStr: '项目详情',
      aptitudeContentStr: '资质介绍',
      aptitudeContent: '',
      Policy: '政策帮扶',
      initData: {
        advertisingType: '',
        applicationRange: '',
        automaticId: 0,
        dataId: '',
        endTime: '',
        label: '',
        layoutPosition: '',
        remark: '',
        sort: 0,
        startTime: '',
        status: false,
        tittle: '',
        CEtimer: []
      },
      videoArray: [],
      photo: '',
      resultDics: {},
      advertisingTypeArr: [
        {
          value: 0,
          label: '商机'
        },
        {
          value: 1,
          label: '直播'
        },
        {
          value: 2,
          label: '课程'
        }
      ]
    }
  },
  watch: {
    id() {
      this.getInitData()
      switch (this.activeName) {
        case 'third':
          this.getVideoList()
          break;
        case 'four':
          this.getContent(this.ProjectDetailStr)
          break;
        case 'five':
          this.getaptitudeContent(this.aptitudeContentStr)
          break;
        case 'six':
          this.getPolicy(this.Policy)
          break;
      }
    },
    updateRight() {
      this.getInitData()
    },
    activeName(newName) {
      switch (newName) {
        case 'four': {
          this.submitDicCode = 'TEXTINFORMATION_DETAIL';
          this.getContent(this.ProjectDetailStr)
          break;
        }
        case 'five': {
          this.submitDicCode = 'TEXTINFORMATION_QUALIFICATION';
          this.getaptitudeContent(this.aptitudeContentStr)
          break;
        }
        case 'third': {
          this.getVideoList()
          break;
        }
        case 'six': {
          this.submitDicCode = 'TEXTINFORMATION_POLICYSUPPORT';
          this.getPolicy(this.Policy)
          break;
        }
      }
    },
    item(newN) {
      newN.id ? (this.orShow = true) : '';
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    changeadvertCoverImage(res){
      this.canSubmitVideo = false
      this.videoArray.forEach((v,index)=>{
        if(v.dataType  === res.type){
          this.$set(this.videoArray[index],'videoThumbailurl',res.cover)
        }
      })
    },
    getImgSrc(res) {
      let result = '';
      this.videoArray.forEach(v => {
        if (v.dataType === res) {
          result = JSON.parse(JSON.stringify(v.url + '?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'))
        }
      })
      return result
    },
    getImgSrc1(res) {
      let result = '';
      this.videoArray.forEach(v => {
        if (v.dataType === res) {
          result = JSON.parse(JSON.stringify(v.videoThumbailurl))
        }
      })
      return result
    },
    changeSubmitVideo(res) {
      this.canSubmitVideo = res
    },
    getVideoList() {
      this.$post({
        url: mmUrl.fileveideo.getfilevideolist,
        data: {
          dataId: this.$props.id
        }
      }).then(res => {
        this.videoArray = res
      })
    },
    message1(v) {
      this.typeCode = v.dicCode
    },
    subMitPhotoList() {
      if (!this.videoArray.length) {
        this.$message.error('请先确认您的提交项~')
        return false
      }
      this.$post({
        url: mmUrl.fileveideo.createfilevideolist,
        data: {
          list: this.videoArray
        }
      }).then(() => {
        this.canSubmitVideo = true
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      })
    },
    changeadvert(res) {
      const newArr = JSON.parse(JSON.stringify(this.videoArray))
      let Index = null
      newArr.forEach((v, index) => {
        if (v.dataType === res.dataType) {
          Index = index
        }
      })
      if (Index != null) {
        newArr.splice(Index, 1, res)
      } else {
        newArr.push(res)
      }
      this.videoArray = newArr
    },
    getContent(res) {
      this.getProDetail({
        typeCode: this.submitDicCode,
        url: mmUrl.text.get,
        dataId: this.$props.id
      }).then(res => {
        res.status === true
          ? (this.isCreateText = true)
          : (this.isCreateText = false),
        (this.ProDetailContent = res.content),
        (this.contentId = res.id)
      })
    },
    getPolicy() {
      this.getProDetail({
        typeCode: this.submitDicCode,
        url: mmUrl.text.get,
        dataId: this.$props.id
      }).then(res => {
        res.status === true
          ? (this.isCreateText = true)
          : (this.isCreateText = false),
        (this.Policy = res.content),
        (this.contentId = res.id)
      })
    },
    getaptitudeContent() {
      this.getProDetail({
        typeCode: this.submitDicCode,
        url: mmUrl.text.get,
        dataId: this.$props.id
      }).then(res => {
        res.status === true
          ? (this.isCreateText = true)
          : (this.isCreateText = false),
        (this.aptitudeContent = res.content),
        (this.contentId = res.id)
      })
    },
    // 获取详情的具体执行函数开始
    getProDetail(res) {
      return new Promise(resolve => {
        this.$post({
          url: res.url,
          data: {
            dataId: this.$props.id,
            typeCode: res.typeCode
          }
        }).then(res => {
          res.item === null
            ? resolve({ status: true })
            : resolve({
              status: false,
              content: res.item.content,
              id: res.item.id
            })
        })
      })
    },
    // 获取详情的具体执行函数结束
    // 提交项目详情的函数开始
    submitProDetailCon(res) {
      const item = this.isCreateText
        ? {
          content: res.text,
          dataId: this.$props.id,
          dataType: '商机项目详情',
          typeCode: this.submitDicCode
        }
        : {
          id: this.contentId,
          content: res.text
        }
      this.submitText({
        url: this.isCreateText ? mmUrl.text.create : mmUrl.text.editor,
        data: {
          item
        }
      }).then(res => {
        this.ProDetailContent = res
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        switch (this.activeName) {
          case 'four': {
            this.submitDicCode = 'TEXTINFORMATION_DETAIL';
            this.getContent(this.ProjectDetailStr)
            break;
          }
          case 'five': {
            this.submitDicCode = 'TEXTINFORMATION_QUALIFICATION';
            this.getaptitudeContent(this.aptitudeContentStr)
            break;
          }
          case 'six': {
            this.submitDicCode = 'TEXTINFORMATION_POLICYSUPPORT';
            this.getPolicy(this.Policy)
            break;
          }
        }
      })
    },
    // 提交项目详情的函数结束
    // 提交文本的具体执行函数开始
    submitText(res) {
      return new Promise(resolve => {
        this.$post({
          url: res.url,
          data: res.data
        })
          .then(res => {
            resolve(res.item.content)
          })
          .catch(err => this.$message.error(err))
      })
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getCompanyId(res) {
      return this.companies.some(v => v.id === res)
        ? this.companies.filter(v => v.id === res)[0].companyName
        : '';
    },
    getProjectType(res) {
      return this.resultDics.PROJECT_TYPE.children.some(v => v.dicCode === res)
        ? this.resultDics.PROJECT_TYPE.children.filter(
          v => v.dicCode === res
        )[0].dicName
        : '';
    },
    getInitData() {
      this.$post({
        url: mmUrl.project.loadEditProjectPage,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.initData = res.item
        this.companies = res.companies
        this.resultDics = createDics(res.dics, 'dicCode')
        this.PROJECT_FILE = this.resultDics.IMAGE_PROJECT_FILE
        this.videoUpload = this.resultDics.VIDEO_BUSINESS
        this.areas = res.areas
        this.loading = false
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        this.photo = res.length ? res[0].fileUrl : '';
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
